let accountLogin = $(".account-login");
let noteLogin = $(".note-login");
let loginFloatLayer = $(".login-float-layer");
let closeHeader = $(".close-header");
let login = $(".login");
let changeColor = $(".button");
let changeColorIndex = 0;
let submit_btn = $(".submit-btn");
let changeHotSearch = $("#change");
let list = $(".item");
let camera = $(".camera");
let crmeraDialog = $(".crmera-dialog");
let selectFile = $(".select-file");
let close = $(".close");
let input = $(".input");
let clearInput = $(".clear-input");
let lastInputValue;

const listItems = [
  "<span class='num1'>1</span>&nbsp;江泽民同志逝世 享年96岁",
  "<span class='num2'>2</span>&nbsp;江泽民同志治丧委员会名单",
  "<span class='num3'>3</span>&nbsp;江泽民同志遗像发布",
  "<span class='num'>4</span>&nbsp;神十五成功对接空间站组合体",
  "<span class='num'>5</span>&nbsp;联合国安理会为江泽民默哀一分钟",
  "<span class='num'>6</span>&nbsp;北京天安门等地下半旗为江泽民志哀",
  "<span class='num'>7</span>&nbsp;街道工作人员上门打人 湖南浏阳通报",
  "<span class='num'>8</span>&nbsp;被法子英劳荣枝案改变的人生",
  "<span class='num'>9</span>&nbsp;广州番禺：解除所有防控临时管控区",
  "<span class='num'>10</span>&nbsp;官方：全国快递网点大面积停摆不实热",
  "<span class='num'>11</span>&nbsp;冷空气发威 上海已见初雪",
  "<span class='num'>12</span>&nbsp;韩国队输球后炸鸡啤酒股价暴跌",
  "<span class='num'>13</span>&nbsp;揭秘核子基因10年“带病”狂奔路",
  "<span class='num'>14</span>&nbsp;欧阳娜娜自创品牌被指“割韭菜”",
  "<span class='num'>15</span>&nbsp;劳荣枝不服死刑判决庭上态度嚣张",
  "<span class='num'>16</span>&nbsp;梅德韦杰夫称北约应忏悔并解散",
  "<span class='num'>17</span>&nbsp;亚洲第一球星正在被韩国网民网暴",
  "<span class='num'>18</span>&nbsp;贝克汉姆在卡塔尔酒店房间内景曝光",
  "<span class='num'>19</span>&nbsp;专家：核酸检测公司该不该上市",
  "<span class='num'>20</span>&nbsp;上海收紧防控 部分区通知储备物资",
  "<span class='num'>21</span>&nbsp;宝沃汽车正式宣告破产",
  "<span class='num'>22</span>&nbsp;劳荣枝案时间线",
  "<span class='num'>23</span>&nbsp;老人养的近4000只鸭子被投毒",
  "<span class='num'>24</span>&nbsp;“小馄饨皮”王子的父亲",
];

const addActive = () => {
  accountLogin.toggleClass("active");
  noteLogin.toggleClass("active");
};

accountLogin.click(addActive);
noteLogin.click(addActive);

closeHeader.click(function () {
  loginFloatLayer.css({
    display: "none",
  });
});

login.click(function () {
  console.log("cilck");
  loginFloatLayer.css({
    display: "block",
  });
});

input.keydown(function (event) {
  if (event.key === "Enter") {
    let commitValue = $(".input").val();
    window.open(`https://cn.bing.com/search?q=${commitValue}`);
  }
});

changeColor.click(function () {
  changeColorIndex++;
  let grayscale = changeColorIndex % 2 === 0 ? "grayscale(1)" : "grayscale(0)";
  $("html").css({
    filter: `${grayscale}`,
  });
  let circle = changeColor.children(".circle");
  let bottomEllipse = changeColor.children(".bottom-ellipse");
  if (changeColorIndex % 2 === 0) {
    circle.css({
      left: "0px",
    });
    bottomEllipse.css({
      backgroundColor: "gray",
    });
  } else {
    circle.css({
      left: "30px",
    });
    bottomEllipse.css({
      backgroundColor: "#007afe",
    });
  }
});

submit_btn.click(function () {
  let commitValue = input.val();
  window.open(`https://cn.bing.com/search?q=${commitValue}`);
});
let listItemsIndex = 6;

changeHotSearch.click(function () {
  for (let i = 0; i < list.length; i++) {
    list.eq(i).html(listItems[listItemsIndex]);
    listItemsIndex++;
    if (listItemsIndex === listItems.length) {
      listItemsIndex = 0;
    }
  }
});

let cameraClickNumber = 0;
camera.click(function () {
  cameraClickNumber++;
  if (cameraClickNumber % 2 === 0) {
    crmeraDialog.css({
      display: "none",
    });
    camera.css({
      display: "block",
    });
    input.val(lastInputValue);
    input.attr("placeholder", "");
  } else {
    crmeraDialog.css({
      display: "block",
    });
    camera.css({
      display: "none",
    });
    lastInputValue = input.val();
    input.val("");
    input.attr("placeholder", "在此处粘贴图片网址");
  }
});

selectFile.click(function () {
  let file = $("<input class='myadd' type='file'/>");
  file.css({
    display: "none",
  });
  $("body").append(file);
  file.click();
  file.remove();
});

close.click(function () {
  crmeraDialog.css({
    display: "none",
  });
  camera.css({
    display: "block",
  });
  input.val(lastInputValue);
  input.attr("placeholder", "");
  cameraClickNumber++;
});

input.keyup(function () {
  if (input.val()) {
    clearInput.css({
      display: "block",
    });
  } else {
    clearInput.css({
      display: "none",
    });
  }
});

clearInput.click(function () {
  input.val("");
  clearInput.css({
    display: "none",
  });
});

window.onclick = (event) => {
  let arr = [...crmeraDialog[0].children];
  if (
    event.target === input[0] ||
    event.target === camera[0] ||
    event.target === crmeraDialog[0] ||
    event.target.className === "myadd" ||
    arr.includes(event.target)
  ) {
    return;
  }
  if (crmeraDialog.css("display") === "block") {
    close.click();
  }
};
